<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{padding: 0;margin: 0;list-style: none;}
        .header{
            border-bottom: 1px solid gainsboro;
            line-height: 50px;
            background-color: #f8f8f8;
            text-align: center;
            position: relative;
        }
        .header img{
            width: 27px;
            position: absolute;
            top: 10px;
            right: 20px;
        }
        img.leftimg{
            right: 80px;
        }
    </style>
</head>

<body>
    <div id="app">
        <myheader title="小组" leftimg="images/ic_actionbar_search_icon.png" rightimg="images/ic_create_group_chat_blue.png"></myheader>
        <myheader title="广播" leftimg="images/ic_status_search_user.png" rightimg="images/ic_create_group_chat_blue.png"> ></myheader>

    </div>
    <template id="headT">
        <header class="header">
            {{title}}<img class="leftimg" :src="leftimg" alt="">
            <img class="rightimg" :src="rightimg" alt="">
        </header>
    </template>
</body>
<script src="js/vue.js"></script>
<script>
    // 父组件
    let vm = new Vue({
        el: "#app",
        components: {
            // 子组件
            myheader: {
                props: ['title', 'leftimg', 'rightimg'],
                template: "#headT"
            },
        }
    })
</script>

</html>